/**
* 商品列表
* -2:已退回;-1:待提交;0:待审核;1:审核通过
**/
'use strict';

import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  NativeModules,
  Animated,
  TouchableHighlight,
} from 'react-native';
import {connect} from 'react-redux';

import { TabViewAnimated,TabViewPagerPan, TabBar, SceneMap } from 'react-native-tab-view';

import ProductLst from './productList';
import ProductAdd from './productAdd';
import backIcon from '../../image/back.png'
import CLNavigatorHeader from '../../component/CLNavigatorHeader'
import StepInfo from './stepInfo';
import { naviPush } from '../../navigatorApp/actions';

var NaviManager = NativeModules.NaviManagerPlugin;
var CommonPlugin = NativeModules.RNCommonPlugin;

import themeconfig from '../../config/theme'

const styles = StyleSheet.create({
  tabBarUnderlineStyle: {
    backgroundColor: themeconfig.maincolor,
    height: 2
  },
  toolbar: {
    backgroundColor: '#0A9D35',
    height: 56,
  },
  naviTopPadding: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
  }, 
  container: {
    flex: 1,
  },
  tabbar: {
    backgroundColor: 'white',
  },
  indicator: {
    backgroundColor: themeconfig.maincolor,
  },
  label: {
    color: themeconfig.maincolor,
    fontWeight: 'bold',
    marginTop: 8,
    marginBottom:8,
  },
});

class ProductMain extends Component {

  static navigationOptions = ({ navigation, screenProps }) => {
    let catId = navigation.state.params.catId;
    let title = '其他管理';
    if (catId == 56) {
      title = '宠物管理';
    } else if (catId == 6) {
      title = '商品管理';
    } else if (catId == 100) {
      title = '服务管理';
    }
    return {
      header:<CLNavigatorHeader navigation={navigation} 
                                title={title}
                                rightTitle={'新增'} 
                                rightAction={() => navigation.state.params.gotoAdd()}
      />,
    }
  };

  state = {
    index: 0,
    routes: [
    { key: '1', title: '出售中' },
    { key: '2', title: '下架' },
    // { key: '3', title: '审核中' },
    { key: '4', title: '草稿' },
    ],
  };

  constructor(props) {
    super(props);

    this.catCode = props.navigation.state.params.catCode;
    this.catId = props.navigation.state.params.catId;
  }

  componentDidMount() {
    this.props.navigation.setParams({gotoAdd: () => this.props.dispatch(naviPush('ProductAdd', {catId: this.catId}))});
  }
 
  _handleIndexChange = index => this.setState({ index });
 
  _renderLabel = props => ({ route, index }) => {
    const inputRange = props.navigationState.routes.map((x, i) => i);
    const outputRange = inputRange.map(
      inputIndex => (inputIndex === index ? themeconfig.maincolor : 'gray')
    );
    const color = props.position.interpolate({
      inputRange,
      outputRange,
    });

    return (
      <Animated.Text style={[styles.label, { color }]}>
        {route.title}
      </Animated.Text>
    );
  };

  _renderHeader = props => <TabBar  
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      renderLabel={this._renderLabel(props)}
      labelStyle={styles.label}  
      {...props} 
  />;
 
  _renderPager = props => <TabViewPagerPan 
  swipeEnabled = {false}
  {...props} 
  />;

  _renderScene = SceneMap({
    '1': () => <ProductLst state="1" tabLabel='出售中' catCode={this.catCode} catId={this.catId}/>,
    '2': () => <ProductLst state="0" tabLabel='下架' catCode={this.catCode} catId={this.catId}/>,
    // '3': () => <ProductLst state="2" tabLabel='审核中' catCode={this.catCode} catId={this.catId}/>,
    '4': () => <ProductLst state="3" tabLabel='草稿' catCode={this.catCode} catId={this.catId}/>,
  });

  render() {
    const colorProps = {
      titleColor: 'white',
    }
    
    return (
      <View style={styles.naviTopPadding}>
        <TabViewAnimated
          style={styles.container}
          tabStyle={{backgroundColor:"white"}}
          indicatorStyle={{backgroundColor:"white"}}
          navigationState={this.state}
          renderScene={this._renderScene}
          renderPager={this._renderPager}
          renderHeader={this._renderHeader}
          onIndexChange={this._handleIndexChange}
        />
      </View>
    );
  }
}

export default connect()(ProductMain);
